<!DOCTYPE HTML>
<html lang="en">
<head>

<!-- charset -->
<meta charset="UTF-8">

<!-- Title, description and keywords -->
<title>Xero | Premium XHTML &amp; CSS Template By TahaH Studio</title>
<meta name="description" content="A premium (X)HTML &amp; CSS template designed and developed by TahaH Studio">
<meta name="keywords" content="xero, XHTM, CSS, Template, Professional, Mulicolour, TahaH, Themeforest">

<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/slider.css" media="screen">
<!--
<link rel="stylesheet" type="text/css" id="skin" href="css/skins/sky-blue.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/skins/blue.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/skins/red.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/skins/purple.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/skins/green.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/skins/orange.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/skins/yellow.css" media="screen">
-->
<link rel="stylesheet" type="text/css" id="skin" href="css/skins/cream.css" media="screen">


<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="all">
<![endif]-->

<!-- Javascripts -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.superfish.min.js"></script>
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/jquery.nivoslider.pack.js"></script>
<script type="text/javascript" src="js/xero.forms.js"></script>
<script type="text/javascript" src="js/xero.js"></script>

<script type="text/javascript">
	// Nivo Slider Options
	$(document).ready(function(){	
		$("#slider").nivoSlider({
			effect:				'fade',	//Specify sets like: 'fold, fade, sliceDown'
			slices:				20,
			pauseTime:			5000,
			directionNavHide:	false,
			pauseOnHover:		true,		//Stop animation while hovering
			manualAdvance:		false,		//Force manual transitions
			captionOpacity:		0.8		//Universal caption opacity
		});
	});
</script>
</head>
<body class="front_page"><!-- add grunge class for grunge style -->
<div id="wrapper">
	<div id="header_container">
		<div id="header">
			<h1 id="logo"> <a href="index.html">Xero HTML &amp; CSS Template</a> </h1>
			<!-- end logo -->
			
			<ul id="nav">
				<li><a href="index.html" class="current"><span>Home</span></a></li>
				<li><a href="#"><span>Pages</span></a>
					<ul class="subnav">
						<li><a href="html-elements.html">HTML Elements Test</a></li>
						<li><a href="full-width.html">Full Width</a></li>
						<li><a href="#">Pages Options</a>
							<ul class="subnav">
								<li><a href="sidebar-left.html">Sidebar Left</a></li>
								<li><a href="sidebar-right.html">Sidebar Right</a></li>
							</ul>
						</li>
						<li><a href="#">Dropdown</a>
							<ul class="subnav">
								<li><a href="#">DropDown</a></li>
								<li><a href="#">DropDown</a></li>
								<li><a href="#">DropDown</a></li>
								<li><a href="#">DropDown</a></li>
								<li><a href="#">DropDown</a>
									<ul class="subnav">
										<li><a href="#">DropDown</a></li>
										<li><a href="#">DropDown</a></li>
										<li><a href="#">DropDown</a></li>
										<li><a href="#">DropDown</a></li>
									</ul>
									<!-- end 3rd sub navigation --> 
								</li>
							</ul>
							<!-- end 2nd sub navigation --> 
						</li>
					</ul>
					<!-- end sub navigation --> 
				</li>
				<li><a href="#"><span>Blog</span></a>
					<ul class="subnav">
						<li><a href="blog.html">Blog Page</a></li>
						<li><a href="single-post.html">Single Post</a></li>
					</ul>
					<!-- end sub navigation --> 
				</li>
				<li><a href="#"><span>Portfolio</span></a>
					<ul class="subnav">
						<li><a href="portfolio-1.html">Portfolio Style 1</a></li>
						<li><a href="portfolio-2.html">Portfolio Style 2</a></li>
						<li><a href="portfolio-3.html">Portfolio Style 3</a></li>
					</ul>
					<!-- end sub navigation --> 
				</li>
				<li><a href="contact.php"><span>Contact</span></a></li>
			</ul>
			<!-- end main navigation -->
			
			<div id="slider_container">				
				<div id="slider">
					<a href="http://www.flickr.com/photos/mescon/4141428555/" target="_blank">
						<img src="images/slider/slide1.jpg" width="940" height="350" alt="">
					</a>
					<a href="http://www.flickr.com/photos/eeko/4659237386/" target="_blank">
						<img src="images/slider/slide2.jpg" width="940" height="350" alt="">
					</a>
					<a href="http://www.flickr.com/photos/mescon/3758893309/" target="_blank">
						<img src="images/slider/slide5.jpg" width="940" height="350" alt="">
					</a>
					<a href="http://www.flickr.com/photos/mar1lyn84/2579564133/" target="_blank">
						<img src="images/slider/slide4.jpg" width="940" height="350" alt="">
					</a>
				</div>
				<!-- actual slider--> 
			</div>
			<!-- end slider container -->
		</div>
		<!-- end header (940px width) --> 
	</div>
	<!-- end header container (100% width) -->
	
	<div id="body_content">
		<div id="front_boxes">
			<div class="box box_1">
				<h2 class="box_title">8 Colors to choose from</h2>
				<!-- box title --> 
				<img src="images/icons/front_boxes/colour_wheel.png" alt="" class="box_icon"><!-- box icon -->
				<p class="box_content"> Lorem ipsum dolor sit amet. Lorem odio, ut condimentum odio. Conetur <a href="#">adipiscing</a> elit a lorem odio.</p>
				<!-- box content --> 
			</div>
			<!-- end box 1 -->
			
			<div class="box box_2">
				<h2 class="box_title">Cross browser compatible</h2>
				<!-- box title --> 
				<img src="images/icons/front_boxes/browsers.png" alt="" class="box_icon"><!-- box icon -->
				<p class="box_content">Lorem odio, ut condimentum odio. Dolor sit amet, <a href="#">consectetur</a> adipiscing elit. Lorem odio, ut condimentum odio.</p>
				<!-- box content --> 
			</div>
			<!-- end box 2 -->
			
			<div class="box box_3">
				<h2 class="box_title">Tons of extra features</h2>
				<!-- box title --> 
				<img src="images/icons/front_boxes/geer.png" alt="" class="box_icon"><!-- box icon -->
				<p class="box_content"> Dlor sit amet, consectetur adipiscing elit. Lorem odio, ut condimentum odio. Nisl vitae ornare, proin turpis eros.</p>
				<!-- box content --> 
			</div>
			<!-- end box 3 --> 
		</div>
		<!-- end front boxes -->
		
		<div id="content" class="has_sidebar left">
			<div class="featured_box">
				<a class="featured_box_image" href="single-post.html">
					<img src="images/home_featured.jpg" alt="Home featured">
				</a>
				<!-- end homepage featured box -->
				
				<h2 class="featured_box_title">
					Xero Featured Box
					<em class="heading_description">A just little description</em>
				</h2>
				<!-- end featured box title -->
				
				<p class="featured_box_content">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate lectus ut orci congue aliquam vel sit amet dolor. Quisque ultricies, neque ut rhoncus eleifend, tortor lorem pellentesque enim, et aliquam dui odio id eros. Aliquam mi leo, imperdiet tristique molestie sit amet, sodales id diam.
				</p>
				<!-- end featured boc content -->
				
				<a href="single-post.html" class="post_read_more">(Read More)</a>
				<!-- end readmore -->
			</div>
			<!-- end featured box -->

			<div class="post">
				<a href="single-post.html" class="post_thumb read_more">
					<img src="images/post_thumb.jpg" alt="">
				</a>
				<!-- end post image -->
				
				<div class="post_content">
					<h2 class="post_title">
						<a href="single-post.html">Test Post</a>
					</h2>
					<!-- end post title -->
					
					<div class="post_info">
						<ul class="post_cats">
							<li><a href="#">Category 1</a> /</li>
							<li><a href="#">Category 2</a></li>
						</ul>
						<p>Posted on 18 May 2010 by Taha Hesham</p>
						<span class="comment_count">12</span><!-- comment count --> 
					</div>
					<!-- end post info -->
					
					<p class="post_brief"> Integer orci ligula, varius ac dictum quis, lobortis et ante. Donec at massa neque. Donec tincidunt commodo arcu eget porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis non erat at nunc egestas commodo. Cras libero lacus, rhoncus a pulvinar quis, iaculis id risus. Sed vitae diam eget enim facilisis consectetur ut vitae nisi. </p>
					<!-- end post excerpt --> 
					
					<a href="single-post.html" class="post_read_more">(Read More)</a> </div>
				<!-- end post content --> 
			</div>
			<!-- end post -->
			
			<div class="post">
				<a href="single-post.html" class="post_thumb read_more">
					<img src="images/post_thumb.jpg" alt="">
				</a>
				<!-- end post image -->
				
				<div class="post_content">
					<h2 class="post_title">
						<a href="single-post.html">Test Post</a>
					</h2>
					<!-- end post title -->
					
					<div class="post_info">
						<ul class="post_cats">
							<li><a href="#">Category 1</a> /</li>
							<li><a href="#">Category 2</a></li>
						</ul>
						<p>Posted on 18 May 2010 by Taha Hesham</p>
						<span class="comment_count">12</span><!-- comment count --> 
					</div>
					<!-- end post info -->
					
					<p class="post_brief"> Integer orci ligula, varius ac dictum quis, lobortis et ante. Donec at massa neque. Donec tincidunt commodo arcu eget porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis non erat at nunc egestas commodo. Cras libero lacus, rhoncus a pulvinar quis, iaculis id risus. Sed vitae diam eget enim facilisis consectetur ut vitae nisi. </p>
					<!-- end post excerpt --> 
					
					<a href="single-post.html" class="post_read_more">(Read More)</a> </div>
				<!-- end post content --> 
			</div>
			<!-- end post -->	
		</div>
		<!-- end content -->
		
		<div id="sidebar" class="right">
		
			<form action="" id="search_widget">
				<label for="search_field" class="auto_clear">Search...</label>
				<!-- end auto clear label -->
				
				<input type="text" name="search_field" id="search_field">
				<!-- end search field -->
				
				<input type="submit" name="search_submit" id="search_submit" value="">
				<!-- end search submit -->
			</form>
			<!-- end search form -->
			
			<div class="inline_content_widget">
				<h3 class="widget_title">
					Text Widget
				</h3>
				<!-- end widget title -->
				
				<div class="widget_content">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac scelerisque nisi. Maecenas auctor tellus semper leo viverra ultricies. Vestibulum vel turpis non enim vulputate gravida at id urna. Proin eu fringilla nulla. Morbi rhoncus pellentesque elit eget dictum. Proin vestibulum iaculis pulvinar. Nam rhoncus velit quis elit sollicitudin tempus iaculis justo vestibulum. Aenean gravida mollis nisl ac posuere. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc feugiat fringilla metus.
				</div>
				<!-- end widget content --> 
			</div>
			<!-- end widget -->
			
			<div class="tabbed_widget">
				<ul class="widget_tabs">
					<li><a href="#tab1"><span>Inline Content</span></a></li>
					<li><a href="#tab2"><span>Categories</span></a></li>
				</ul>
				<!-- end tabs heads -->
				
				<div class="widget_tabs_content">
					<div class="tab_content">
						<h3>Just a Title</h3>
						<img src="images/content_widget.jpg" width="126" class="alignright" alt=""> Quisque sapien odio, malesuada vel hendrerit in, pellentesque vitae erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi elementum vulputate porttitor. Fusce sed metus in nisi facilisis malesuada. Curabitur volutpat hendrerit enim, eget rutrum massa semper in. Sed tristique, augue sit amet aliquam pharetra.
					</div>
					<!-- end tab 1 content -->
					
					<div class="tab_content">
						<h3>Categories</h3>
						<ul>
							<li><a href="#">Web design</a></li>
							<li><a href="#">Branding</a></li>
							<li><a href="#">Some category</a></li>
							<li><a href="#">Another one</a></li>
							<li><a href="#">Final one</a></li>
						</ul>
					</div>
					<!-- end tab 2 content -->
				</div>
				<!-- end tabs content -->
			</div>
			<!-- end widget --> 
			
		</div>
		<!-- end sidebar -->
	</div>
	<!-- end body content -->
	
	<div id="footer_container">
		<div id="footer">
			<ul class="copyright_info reset_style">
				<li><img src="images/xero_logos/footer_logo.png" alt="" id="footer_logo" class="reset_style center"></li>
				<li>A Theme By <a href="http://wizylabs.com">Wizy Labs</a>. Copyright &copy; 2010</li>
			</ul>
			<!-- end copyright info, copyright info can be changed as desired -->
			
			<div class="footer_nav_container">
				<ul class="footer_nav reset_style">
					<li><a href="#">Home</a> /</li>
					<li><a href="#">About</a> /</li>
					<li><a href="#">Advertise</a> /</li>
					<li><a href="#">Contact</a> /</li>
					<li><a href="#">Icons by IconDock</a></li>
				</ul>
				<!-- end footer nav -->
				
				<ul class="social_profiles reset_style">
					<li><a href="#"><img title="By mail" src="images/icons/social_profiles/16/email.png"></a></li>
					<li><a href="#"><img title="My Facebook account" src="images/icons/social_profiles/16/facebook.png"></a></li>
					<li><a href="#"><img title="My Flickr account" src="images/icons/social_profiles/16/flickr.png"></a></li>
					<li><a href="#"><img title="My Twitter account" src="images/icons/social_profiles/16/twitter.png"></a></li>
					<li><a href="#"><img title="RSS feed" src="images/icons/social_profiles/16/rss.png"></a></li>
				</ul>
				<!-- end social profiles nav -->
			</div>
		</div>
		<!-- end actual footer -->
	</div>
	<!-- end footer container -->
</div>
<!-- end wrapper -->
</body>
</html>